<!--*************************************
* @update: xxx_日期  zhangzhenmeng  [创建文件]
* @update: 2022-10-12  lilinbin  [二次封装]
* 
* @description: 颜色选择器二次封装
*
* 颜色选择插件: vue3-colorpicker
* 说明文档地址: https://aesoper101.github.io/vue3-colorpicker/?path=/story/example-introduction--page
*
* 如何使用:
		1. import vcloudColorPicker from 'tools/components/6_vcloudColorPicker'
		2. <vcloudColorPicker v-model:color="myColor" :useType="'both'" @changeColor="" />
****************************************-->


<template>
	<div @click.stop="showColorPicker">
		<!-- useType的取值: pure只显示纯色; gradient只显示渐变色; both 显示纯色和渐变色 -->
		<color-picker :pureColor="pureColor"
		    :gradientColor="gradientColor"
		    @pureColorChange="changeColor"
		    @gradientColorChange="changeColor"
		    @activeKeyChange="colorPickerDomShowColor()"
		    v-bind="$attrs" />
	</div>
</template>


<script>
export default {
	des: '颜色选择器', //组件功能描述
	name: 'vcloudColorPicker',
	mixins: [],
	components: {},
	props: {
		color: {
			type: String,
			default: ''
		}
	},
	setup(props, { attrs, slots, emit }) {},
	data() {
		return {
			pureColor: '',
			gradientColor: '',

			colorPickerColor: '', //记录当前颜色
			useColorPicker: false //是否是手动点击使用了
		}
	},
	computed: {},
	watch: {
		color: {
			handler(curColor) {
				if (curColor && curColor.includes('linear-gradient')) {
					this.pureColor = ''
					this.gradientColor = curColor //渐变色
				} else {
					this.pureColor = curColor //纯色
					this.gradientColor = ''
				}
				this.colorPickerDomShowColor(curColor)
			},
			immediate: true
		}
	},
	created() {},
	mounted() {},
	methods: {
		changeColor(newColor) {
			//拦截触发多次
			if (!this.useColorPicker) return
			if (newColor == this.colorPickerColor) return

			this.$emit('update:color', newColor)
			this.$emit('changeColor', newColor)
		},

		//colorPicker的 div.current-color 显示当前的颜色
		colorPickerDomShowColor(color) {
			this.colorPickerColor = color || this.colorPickerColor
			if (!this.colorPickerColor) return

			this.$nextTick(() => {
				const colorPicker = this.$el.querySelector('.current-color')
				colorPicker.style.background = this.colorPickerColor
			})
		},

		showColorPicker(e) {
			const picker = document.querySelector('.vc-colorpicker')
			if (!picker) return

			const pickerW = picker.offsetWidth
			const pickerH = picker.offsetHeight

			const { clientWidth, clientHeight } = document.body

			const left = Math.min(
				e.clientX + (e.target.offsetWidth - e.offsetX),
				clientWidth - pickerW
			)
			const top = Math.min(
				e.clientY + (e.target.offsetHeight - e.offsetY) + 2,
				clientHeight - pickerH
			)

			const pickerParent = picker.parentElement
			pickerParent.style.cssText += `left:${left}px;top:${top}px;transform:unset;`

			this.useColorPicker = true //手动点击了
			// if (!this.colorPickerColor) return
			this.colorPickerDomShowColor()
			this.observeColorPickerShowHide(pickerParent)
			// this.addEvent()
		},

		//处理失去焦点不触发颜色改变的bug
		/* addEvent() {
			const picker = document.querySelector('.vc-colorpicker')
			picker.addEventListener('mouseleave', () => {
				console.log('0000888')
				// 获取'vc-color-input'和'vc-alpha-input__inner'的值
			})
		}, */

		//监听color-picker的显示和隐藏
		observeColorPickerShowHide(targetNode) {
			const callback = (mutationsList, observer) => {
				this.useColorPicker = false
				this.colorPickerDomShowColor()
				observer.disconnect()
				observer = null
			}
			const config = { attributes: true }
			const observer = new MutationObserver(callback)
			observer.observe(targetNode, config)
		}
	},
	beforeUnmount() {}
}
</script>
